<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
</head>
<body>
<div id="app">

  <h1>{{msg}}</h1>
<!--  通过复选框的单个使用动态绑定-->

  <h3>复选框的单个使用</h3>
  <input type="checkbox" v-model="isAgree">同意该协议，开始游戏！
  <br/>
  <hr>
  <h3>复选框的多个使用</h3>
<!--  要保证选取的值都能同时在一个地方收集，所以要给input设置相同的-->
  <h3>请选择你喜欢的水果</h3>
  <input type="checkbox" name="fruit" v-model="fruit" value="香蕉">苹果
  <input type="checkbox" name="fruit" v-model="fruit" value="西瓜">香蕉
  <input type="checkbox" name="fruit" v-model="fruit" value="橘子">西瓜
  <input type="checkbox" name="fruit" v-model="fruit" value="苹果">橘子

  <hr>
  <h3>单选框的使用</h3>
  <h3>请选择你的性别</h3>
  <input type="radio" name="sex" value="男"  v-model="sex">男
  <input type="radio" name="sex" value="女" v-model="sex">女
</div>

<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el:'#app',
    data(){
      return{
        msg:'hello Vue~~~',
        isAgree:false,
        fruit:[],
        sex:''
      }
    }
  })
</script>

</body>
</html>